
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" /> 
<script type="text/javascript" src="https://apis.map.qq.com/tools/geolocation/min?key=EJDBZ-GHO3D-MB24R-HJ3FZ-2B3Y6-52FBX&referer=myapp"></script>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=EJDBZ-GHO3D-MB24R-HJ3FZ-2B3Y6-52FBX"></script>
<style type="text/css">
    html,
    body {
        height: 100%;
        margin: 0px;
        padding: 0px;
    }

    #container {
        width: 100%;
        height: 100%;
    }
	#mypos{display:block;position:absolute;top:20px;left:20px;z-index:10000;}
	#myMarker{transform:rotate(45deg);}
</style>
<title></title>
</head>
<body>

<div id="container"></div>
<button id="mypos" onclick="getMyLocation()">我的位置</button>
<script type="text/javascript">
	
	var map;
	
	var drawContainer = document.getElementById('container');
	
	var center = new TMap.LatLng(39.953416, 116.380945);
	var list =[
		{ // 点数组
		  position: new TMap.LatLng(39.953416, 116.480945),
		  index:0
		},
		{
		  position: new TMap.LatLng(39.984104, 116.407503),
		  index:1
		},
		{
		  position: new TMap.LatLng(39.908802, 116.497502),
		  index:2
		},
		{
		  position: new TMap.LatLng(40.040417, 116.373514),
		  index:3
		},
		{
		  position: new TMap.LatLng(39.953416, 116.380945),
		  index:4
		},
		{
		  position: new TMap.LatLng(39.984104, 116.307503),
		  index:5
		},
		{
		  position: new TMap.LatLng(39.908802, 116.397502),
		  index:6
		},
		{
		  position: new TMap.LatLng(40.040417, 116.273514),
		  index:7
		},
	  ];
	map = new TMap.Map('container', {
	  zoom: 10,
	  pitch: 0,
	  center: center
	});
	
	//腾讯地图 实例   https://lbs.qq.com/webDemoCenter/glAPI/glMap/mapCenter
	
	//监测地事件 实例  https://lbs.qq.com/webDemoCenter/javascriptV2/event/listenZoom
	
	
	map.on('zoom_changed',
	    function() {
	        //console.log("缩放地图",map.getZoom());
	    }
	);
	
	// 创建点聚合  聚合点 自定义样式 见index3.html 在index3.html中点聚合 通过display 来控制显示隐藏
	//index.html 通过删除dom 来控制点的多少
	var markerCluster = new TMap.MarkerCluster({
	  id: 'cluster',
	  map: map,
	  enableDefaultStyle: false, // 关闭默认样式
	  minimumClusterSize: 3,
	  geometries: list,
	  zoomOnClick: true,
	  gridSize: 40,
	  averageCenter: false
	});
	
	
	var clusterBubbleList = [];
	var markerGeometries = [];
	var marker = null;
	var labelList = [];
	var dounarr=[];
	// 监听聚合簇变化
	jh()
	addlabel();
	function jh(){
		markerCluster.on('cluster_changed', function (e) {
		  // 销毁旧聚合簇生成的覆盖物
		  if (clusterBubbleList.length) {
			clusterBubbleList.forEach(function (item) {
			  item.destroy();
			})
			clusterBubbleList = [];
		  }
		  markerGeometries = [];

		  // 根据新的聚合簇数组生成新的覆盖物和点标记图层
		  var clusters = markerCluster.getClusters();
		  //console.log(clusters)
		  clusters.forEach(function (item) {
			console.log(item)
			if (item.geometries.length > 1) {
				console.log(item)
			  let clusterBubble = new ClusterBubble({
				map,
				position: item.center,
				content: item.geometries.length,
				color:"#0000ff"
			  });
			  clusterBubble.on('click', () => {
				 
				map.fitBounds(item.bounds);
			  });
			  clusterBubbleList.push(clusterBubble);
			} else {
			  if(item.geometries.length==1){
				  var index = item.geometries[0].index
			  }else{
				  var index=null
			  }
			  markerGeometries.push({
				position: item.center,
				index:index
			  });
			}
			
			
			
		  });
		 
		 
		  
		  
		  if (marker) {
			// 已创建过点标记图层，直接更新数据
			resizeLabel(markerGeometries)
			marker.setGeometries(markerGeometries);
		  } else {
			// 创建点标记图层
			
			marker = new TMap.MultiMarker({ // 添加多个标签 markerGeometries 是个位置数组 
			  id:"markerid",
			  map,
			  styles: {
				default: new TMap.MarkerStyle({
				  'width': 34,
				  'height': 42,
				  'anchor': {
					x: 17,
					y: 21,
				  },
				  'src': 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker_blue.png',
				}),
			  },
			  geometries: markerGeometries
			});
			
			marker.on("click", eventClick)
			
			console.log(markerGeometries)
			
			
		  
		  
		  
		  }
		});
	}
	
	function eventClick(e){
		console.log(e.geometry.index);
	}
	
	function removeDom(arr){
		arr.forEach(function(item){
			item.remove();
		})
		
	}
	function resizeLabel(arr){
		
		for(var i=0;i<list.length;i++){
			var src="https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerNew.png"
			var width = 1;
			var height = 1;
			var opacity= 0;
			var anchor= { x: 10, y: -20 };
			labelList[i].setStyles({
			  marker: new TMap.MarkerStyle({
				width,
				height,
				anchor,
				opacity,
				src
			  })
			});
			
		}
		
		for(var i=0;i<arr.length;i++){
				var src="https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerNew.png"
				var width = 20;
				var height = 20;
				var opacity= 1;
				var anchor= { x: 10, y: -20 };
				
				labelList[arr[i].index].setStyles({
				  marker: new TMap.MarkerStyle({
					width,
					height,
					anchor,
					opacity,
					src
				  })
				});
			
			
			
		}
		
		
		
	}
	function addlabel(n){
		for(var i=0;i<list.length;i++){
			//var latlng = list[i].split(",");
			
			var labelgeometries={
		            "id": "marker"+i,
					
		            "styleId": 'marker',
		            "position": list[i].position,
		            "properties": {
		                "title": "marker1"
		            }
		        }
				
			var src1="https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerNew.png"
			var labelmarker = new TMap.MultiMarker({
		        id: 'marker-layer'+i,
		        map: map,
				index:i,
		        styles: {
		            marker: new TMap.MarkerStyle({
		                width: 20,
		                height: 20,
		                anchor: { x: 10, y: -20 },
		                src: src1
		            })
		        },
		        geometries: [labelgeometries]
			})
			labelList.push(labelmarker)
			
			}
			
		labelList.forEach((e, i) => {
				//console.log(e);
		  function markerListClick(res) {
		    console.log(i)	  
		  }
		  e.on("click", markerListClick); /* 每个都绑定点击事件 */
		});	
	}
	
	function labeleventClick(e){
		console.log(e);
	}
	
	// 以下代码为基于DOMOverlay实现聚合点气泡
	 function ClusterBubble(options) {
	   TMap.DOMOverlay.call(this, options);
	 }
		
	 ClusterBubble.prototype = new TMap.DOMOverlay();
		
	 ClusterBubble.prototype.onInit = function (options) {
	   this.content = options.content;
	   this.position = options.position;
	 };
	 
	 // 销毁时需要删除监听器
	 ClusterBubble.prototype.onDestroy = function() {
	 	this.dom.removeEventListener('click', this.onClick);
	   this.removeAllListeners();
	 };
		
	 ClusterBubble.prototype.onClick = function() {
	   this.emit('click');
	 };
		
	 // 创建气泡DOM元素
	 ClusterBubble.prototype.createDOM = function () {
	   var dom = document.createElement('div');
	   dom.classList.add('clusterBubble');
	   //dom.innerText = this.content;
			// dom.innerHTML='<div style="width:100%;height:100%;border-radius:50%;color:#ff0000;"><img src="https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/em.jpg" style="width:100%;height:100%;border-radius:50%;">'+this.content+'</div>'
			dom.innerHTML='<div style="width:100%;height:100%;border-radius:50%;color:#ff0000;">'+this.content+'</div>'
	   dom.style.cssText = [
			  'background: #00ff00;',
	     'width: 30px;',
	     'height: 30px;',
	     'line-height: 30px;',
			  'border-radius:50%;'
	   ].join(' ');
	     
	   // 监听点击事件，实现zoomOnClick
	   console.log(this)
	   this.onClick = this.onClick.bind(this);
	   dom.addEventListener('click', this.onClick);
	   return dom;
	 };
		
	 ClusterBubble.prototype.updateDOM = function () {
	   if (!this.map) {
	     return;
	   }
	   // 经纬度坐标转容器像素坐标
	   let pixel = this.map.projectToContainer(this.position);
		
	   // 使文本框中心点对齐经纬度坐标点
	   let left = pixel.getX() - this.dom.clientWidth / 2 + 'px';
	   let top = pixel.getY() - this.dom.clientHeight / 2 + 'px';
	   this.dom.style.transform = `translate(${left}, ${top})`;
		
	   this.emit('dom_updated');
	 };
		
	 window.ClusterBubble = ClusterBubble;

	
	
	
			
</script>

</body>
</html>
